page{
    width: 100%;
    height: 100%;
}

.main{
    position: relative;
    .canvas{
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 375px;
        height: 627px;
        // display: none;
    }
}

.content{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .title-bottom-line{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 1rpx;
        background-color: #ddd;
    }
    .tip{
        position: absolute;
        left: 50%;
        top: 45rpx;
        transform: translateX(-50%);
        line-height: 37rpx;
        font-size: 26rpx;
        color: #9C9C9C;
    }
    .box{
        position: absolute;
        top: 110rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 633rpx;
        height: 885rpx;
        box-shadow: 0px 2rpx 60rpx 0px rgba(216,216,216,0.5);
        .top-block{
            position: relative;
            width: 100%;
            height: 475rpx;
            .user-img{
                width: 100%;
                height: 100%;
            }
            .add-btn{
                position: absolute;
                top: 168rpx;
                left: 50%;
                width: 108rpx;
                height: 108rpx;
                transform: translateX(-50%);
                .add-icon{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .top-block.bgColor{
            background-color: #C5E89E;
        } 
        .wxapp-code{
            position: absolute;
            top: 408rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 140rpx;
            height: 140rpx;
        }
        .bottom-block{
            width: 100%;
            height: 410rpx;
            .bottom-bg{
                width: 100%;
                height: 100%;
            }
            .text-row{
                position: absolute;
                top: 603rpx;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                justify-content: center;
                line-height: 42rpx;
                font-size: 30rpx;
                color: #0E0F28;
                .name{
                    margin-left: 10rpx;
                    color: #627E44;
                }
            }
        }
    }
}
.look-more-wrap.translateDown{
    transform: translateY(1000rpx);
}
.look-more-wrap{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    transition: all 0.5s;
    .guide-row{
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 40rpx;
        width: 100%;
        height: 100rpx;
        box-sizing: border-box;
        .left-txt{
            line-height: 45rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #5094FF;
        }
        .right-txt{
            position: absolute;
            top: 50%;
            right: 40rpx;
            transform: translateY(-50%);
            line-height: 33rpx;
            font-size: 24rpx;
            color: #9C9C9C;
        }
    }
    .box-shadow{
        box-shadow: 0px -12rpx 32rpx 0px rgba(216,216,216,0.5); 
    }
    .steps{
        border-top: 1rpx solid #e8e8e8;
        height: 1000rpx;
        padding: 0 0 0 40rpx;
        .block{
            border-bottom: 1rpx solid #f2f2f2;
            // padding-bottom: 40rpx;
            border-bottom: 40rpx solid #fff;
            .title{
                margin: 20rpx 0 23rpx 0;
                line-height: 45rpx;
                font-size: 32rpx;
                font-weight: bold;
                color: #2C2B40;
            }
            .paragraph{
                padding-right: 120rpx; 
                margin-top: 23rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #666;
                word-break: break-all;
            }
        }
        .block:last-child{
            border: none;
        }
    }
}

.triangleTop{
    position: absolute;
    right: 40rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 25rpx;
    height: 25rpx;
}
.triangleBottom{
    transform: translateY(-50%) rotate(180deg)
}
